<template>
  <div style="background: #f2f2f2;">
    <div class="header">
      <img src="../../images/left.png" alt @click="$router.back(-1)" />任务详情
    </div>
    <!--header-->
    <div class="endClock">
      <p id="status_text" v-html="time"></p>
      <!-- <p v-if="remark" v-html="time"></p> -->
    </div>

    <div class="workinter">
      <p
        v-if="remark"
        class="remark"
        style="background:#FFF8C4;text-align: center"
      >拒绝理由：{{ remark }}</p>
      <!--任务详情-->
      <div class="works_List">
        <div class="Numeset">
          <div class="workNumts">
            <p>
              任务编号：
              <span
                data-clipboard-text="s1272339238765965bb"
                id="ticketNum"
              >{{ task.work.work_no }}</span>
            </p>
          </div>
          <div class="copyes" v-if="task.work.work_no">
            <button
              class="btncopys"
              data-clipboard-target="#ticketNum"
              v-clipboard="task.work.work_no"
              @success="handleSuccess"
              @error="handleError(task.work.work_no)"
            >复制</button>
          </div>
        </div>
        <div class="clearfix scenred">
          <div class="goodLogo">
            <img :src="img" class="listImgs fl" @click="swiperIMG()" v-if="img" />
            <p>
              共{{ task.job.type.val == 3 ? get(task,'job.images.length')-1 : get(task,'job.images.length')
              }}张
            </p>
          </div>
          <!--<span>1/2</span>-->
          <div class="fl listTextDev">
            <h3 @click="titleMessage(task.job.goods.goods_title)">{{ task.job.goods.goods_title }}</h3>
            <p v-if="task.job.goods.goods_price">
              商品展示价格
              <span>{{ task.job.goods.goods_price.replace(/\d\./, '*.') }}</span>
            </p>
            <p v-if="task.job.goods.pay_number">
              付款人数
              <span>{{ task.job.goods.pay_number }}</span>
            </p>
            <div class="clearfix moneyset">
              <div class="fl" style="margin-right: 0.57rem;">
                <span style="color:#FDB549;font-weight: 600;">￥{{ task.work.user_money }}</span>
              </div>
              <div class="fl" v-if="get(task,'job.reward.job_meta_value')">
                <!--<span class="reward">加赏 <b>{{ get(task,'job.reward.job_meta_value') }}</b></span>-->
                <em class="reward">
                  <ul>
                    <li>加赏</li>
                    <!-- <li>加赏{{ get(task,'job.reward.job_meta_value') }}</li> -->
                  </ul>
                </em>
              </div>
              <div class="fl" style="margin-left: 0.57rem;">
                <img src="../../images/privilege-jifen.png" />
                <span v-if="task.job.sort == '1000000000'">{{ finish_work_credit }}</span>
                <span v-else>{{ credit_multiple }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 特殊要求 -->
      <div id="tsyqBody" v-if="modalshow">
        <div class="head">
          <h3>特殊要求</h3>
          <p>请认真阅读特殊要求，并按要求做任务</p>
        </div>
        <div class="content">{{ get(task,'job.reward.job_meta_value') }}</div>
      </div>
      <div
        class="modalzz"
        v-if="modalshow || swiperImg || exampleUrl"
        @click="modalshow = false; swiperImg = false; exampleUrl = false; sampleTitle = ''; description = ''"
      >
        <img
          src="../../images/close.png"
          alt
          @click="modalshow = false;swiperImg = false;exampleUrl = false; sampleTitle = ''; description = ''"
        />
      </div>
      <img
        src="../../images/tsyq.gif"
        alt
        class="tsyq"
        @click="modalshow = true"
        v-if="get(task,'job_meta.job_meta_key')"
      />
      <!--推广需求-->
      <div class="tuiNeeds">
        <h3>
          <img src="../../images/dilIcon.png" class="dilIcon" />推广需求
        </h3>
        <div class="soneas">
          <div class="fl">
            <!--<img src="../../images/dilIcon.png"/>-->
            <span>任务账号</span>
          </div>
          <div class="fr" v-if="task.consumer">
            <span v-if="cross">{{ task.consumer }}</span>
            <span v-else>{{ task.consumer.login }}</span>
          </div>
        </div>
        <div class="soneas">
          <div class="fl">
            <!--<img src="../../images/dilIcon.png"/>-->
            <span>任务类型</span>
          </div>
          <div class="fr">
            <span>
              <em v-if="parent_job">（{{ parent_job }}）</em>
              {{ task.job.type.text }}
            </span>
          </div>
        </div>
        <div class="soneas">
          <div class="fl">
            <!--<img src="../../images/dilIcon.png"/>-->
            <span>任务入口</span>
          </div>
          <div class="fr" style="text-align: right">
            <em v-if="returnEntrance">{{ returnEntrance }}</em>

            <span
              style="display: inline-block;"
              v-for="img in get(task,'job.images')"
              v-if="img.type == 4"
            >
              <a>
                <img :src="img.url" v-if="img.url.indexOf('http') != -1" style="width:3rem" />
                <img :src="qiniu_domain_url + img.url" v-else style="width:3rem" />
              </a>
            </span>
            <!-- 扫码任务 -->
            <span style="display: inline-block;" v-if="task.job.type.tag == 'qrcode'">
              <a>
                <img
                  :src="task.job.qrcode.url"
                  v-if="task.job.qrcode.url.indexOf('http') != -1"
                  style="width:3rem"
                  @click="exampleUrl = task.job.qrcode.url"
                />
                <img
                  :src="qiniu_domain_url + task.job.qrcode.url"
                  v-else
                  style="width:3rem"
                  @click="exampleUrl = qiniu_domain_url + task.job.qrcode.url"
                />
              </a>
            </span>
            <!-- 淘口令 -->
            <span
              v-if="task.job.type.tag == 'command'"
              class="overauto"
              v-clipboard="get(task, 'job.amoy_link.job_meta_value')"
              @success="handleSuccess"
              @error="handleError(task.job.amoy_link.job_meta_value)"
            >{{ get(task, 'job.amoy_link.job_meta_value') }}</span>

            <!-- 聚划算 -->
            <span
              @click="exampleUrl = 'https://wyrq-2.oss-cn-shanghai.aliyuncs.com/admin/20190110/47vgcE544a7d3a381b363236e17af5b5860b15.png'"
              v-else-if="task.job.type.val == 4"
            >{{ task.job.type.text }}</span>

            <!-- 淘抢购 -->
            <span
              @click="exampleUrl = 'https://wyrq-2.oss-cn-shanghai.aliyuncs.com/admin/20190110/8FWEHx68c500667488a6910b394ab7e1df0f37.png'"
              v-else-if="task.job.type.val == 5"
            >{{ task.job.type.text }}</span>

            <!-- 直通车 -->
            <span
              @click="exampleUrl = 'https://wyrq-2.oss-cn-shanghai.aliyuncs.com/admin/20190110/siAkY5f1a70ef84ba0ae6c81ff5f51f6376752.png'"
              v-else-if="task.job.type.val == 2"
            >{{ task.job.type.text }}</span>

            <!-- 有关键词时 -->
            <span v-else-if="get(task, 'work.keyword.keyword') && !returnEntrance">
              <em
                v-clipboard="get(task, 'work.keyword.keyword')"
                @success="handleSuccess"
                @error="handleError(task.work.keyword.keyword)"
              >{{ get(task, 'work.keyword.keyword') }}</em>
            </span>
            <!-- 分享链接 -->
            <span
              v-else-if="task.job.type.tag == 'share_link'"
              v-clipboard="get(task, 'job.amoy_link.job_meta_value')"
              @success="handleSuccess"
              @error="handleError(task.job.amoy_link.job_meta_value)"
            >{{ task.job.amoy_link.job_meta_value }}</span>
          </div>
        </div>
      </div>
      <!--任务需求-->
      <div class="worksNeeds" v-if="task.work.keyword">
        <h3>
          <img src="../../images/dilIcon.png" class="dilIcon" />任务需求
        </h3>
        <!--<div class="copyes fr" style="margin: 0.1rem .55rem;padding-top: .4rem">-->
        <!--<button class="btncopys" data-clipboard-target="#ticketNum"-->
        <!--@click="jumpToTaobao()" v-if="task.open_taobao != 0">打开手淘-->
        <!--</button>-->
        <!--</div>-->
        <div class="Workssoneas">
          <div class="fl">
            <!--<img src="../../images/dilIcon.png"/>-->
            <!--<span>任务要点</span>-->
          </div>
        </div>
        <ul class="W_550">
          <li>
            <span style="width: 5rem;">搜索关键字（点击复制）</span>
            <span
              v-clipboard="get(task, 'work.keyword.keyword')"
              @success="handleSuccess"
              @error="handleError(task.work.keyword.keyword)"
            >{{ get(task, 'work.keyword.keyword') }}</span>
          </li>
          <li>
            <span>搜索页范围</span>
            <span>{{ get(task, 'work.keyword.page_start') }} - {{ get(task, 'work.keyword.page_end') }}</span>
          </li>
          <li>
            <span>搜索类型</span>
            <span>{{ get(task, 'work.keyword.search_type') }}</span>
          </li>
          <li>
            <span>排序方式</span>
            <span>{{ get(task, 'work.keyword.order_type') }}</span>
          </li>
          <li>
            <span>价格区间</span>
            <span>{{ get(task, 'work.keyword.price_start') }} - {{ get(task, 'work.keyword.price_end') }}</span>
          </li>
          <li>
            <span>发货地</span>
            <span>{{ get(task, 'work.keyword.send_address') }}</span>
          </li>
        </ul>
      </div>
      <!--特殊需求-->
      <div class="specialNeeds" v-if="get(task,'job.job_meta.job_meta_value')">
        <h3>特殊需求</h3>
        <div class="copyes fr" style="margin: 0.1rem .55rem">
          <button
            class="btncopys"
            data-clipboard-target="#ticketNum"
            v-clipboard="get(task,'job.job_meta.job_meta_value')"
            @success="handleSuccess"
            @error="handleError(task.job.job_meta.job_meta_value)"
          >复制</button>
        </div>
        <div class="tsxq">
          <span>{{ get(task,'job.job_meta.job_meta_value') }}</span>
        </div>
      </div>
      <div class="specialNeeds">
        <h3>
          <img src="../../images/dilIcon.png" class="dilIcon" />注意事项
        </h3>
        <div class="W_575">
          <div class="notice">
            <span>如未遵守以下几点并多次被投诉将封号</span>
          </div>
          <!--<div class="noticeFirst">-->
          <!--<img src="../../images/569.png"/>-->
          <!--<span v-if="task.job.platform">重要通知：请小伙伴们，【手动启动】{{ task.job.platform.platform_name }}app做任务，如被商家举报，情节严重者，平台将封号处理</span>-->
          <!--</div>-->
          <div class="noticeFirst">
            <img src="../../images/569.png" />
            <span>接取任务后，请确保在【任务有效期内】提交任务如果任务过期，将扣除0.2金币</span>
          </div>
          <div class="explain" v-if="task.job.platform">
            <p v-if="task.consumer">
              1.确认使用
              <span v-if="cross">【{{ task.consumer }}】</span>
              <span v-else>【{{ task.consumer.login }}】</span>
              任务号登录手机{{ task.job.platform.platform_name }}app，用错任务号将扣除佣金，并进行处罚
              <span>2金币</span>，多次被投诉将
              <span>封号</span>
            </p>
            <p>
              2.请务必核对店铺名称/店铺掌柜名
              <span>【{{ task.job.shop.hide_name }}】</span>，并对目标商品从上到下进行
              <span>至少2分钟浏览</span>
            </p>
            <p>
              3.加购物车至少保留
              <span>【7】</span>天，收藏商品，收藏店铺至少保留
              <span>【30】</span>天
            </p>
          </div>
        </div>
      </div>

      <!--提交截图-->
      <div class="printscreen">
        <h3>
          <img src="../../images/dilIcon.png" class="dilIcon" />提交截图
        </h3>
        <div class="specialNeedsImg">
          <!--<div class="fl">-->
          <!--<img src="../../images/000.png" style="margin-right: .1rem"/>-->
          <!--<span>示例截图</span>-->
          <!--</div>-->
          <!--<div class="copyes" style="position: absolute;left: 3rem;">-->
          <!--<a href="https://wb.woyaorenqi.cn/app_html/example_images.html">-->
          <!--<button>所有示例</button>-->
          <!--</a>-->
          <!--</div>-->
          <!--<div class="fr copyes">-->
          <!--<a :href="task.guifan">-->
          <!--<button>规范</button>-->
          <!--</a>-->
          <!--</div>-->
        </div>
        <ul class="noticeander">
          <li>
            <img src="../../images/569.png" />
            <span>请在任务过期前提交任务</span>
          </li>
          <li>
            <img src="../../images/569.png" />
            <span>注意：示例样图仅供参考</span>
          </li>
          <li v-if="task.consumer">
            <img src="../../images/569.png" />
            <span>
              请确保使用
              <span v-if="cross">【{{ task.consumer }}】</span>
              <span v-else>【{{ task.consumer.login }}】</span>执行任务
            </span>
          </li>
        </ul>
        <div class="Inphotts clearfix">
          <div class="Joinglist clearfix" id="Joinglist_f1">
            <div
              class="Imgphoto fl"
              v-for="(origin,index) in task.work.items.origin"
              v-if="origin.job_option_group == 1"
            >
              <div class="Imgphotos">
                <!-- status 为 1 时为可传图片状态 -->
                <div
                  class="JoinImgs"
                  v-if="task.work.status.val == 1 || task.work.status.val == 5 || task.work.status.val == 6"
                >
                  <div v-if="task.work.status.val != 5 && task.work.status.val != 6">
                    <img
                      v-if="origin.uploadedImg"
                      :src="origin.uploadedImg"
                      :id="'jobImg' + origin.job_option_id"
                      class="JoinImgsLogo"
                    />
                    <img
                      v-else
                      src="../../images/336.png"
                      :id="'jobImg' + origin.job_option_id"
                      class="JoinImgsLogo"
                    />
                    <input
                      type="file"
                      @change="file"
                      accept="image/*"
                      name="image"
                      multiple="multiple"
                      :id="origin.job_option_id"
                      inx="1"
                    />
                  </div>
                  <div v-else>
                    <div
                      v-for="imgss in task.work.work_images"
                      v-if="imgss.job_option_id == origin.job_option_id"
                    >
                      <img
                        class="JoinImgsLogo"
                        :id="'jobImg' + origin.job_option_id"
                        :src="imgss.job_option_id == origin.job_option_id ? imgss.screenshot_url : ''"
                        alt
                      />
                      <input
                        type="file"
                        @change="file"
                        accept="image/*"
                        name="image"
                        multiple="multiple"
                        :id="origin.job_option_id"
                        inx="1"
                      />
                    </div>
                  </div>
                </div>
                <div class="JoinImgs" v-else>
                  <img
                    class="JoinImgsLogo"
                    v-for="imgss in task.work.work_images"
                    v-if="imgss.job_option_id == origin.job_option_id"
                    :src="imgss.job_option_id == origin.job_option_id ? imgss.screenshot_url : ''"
                    alt
                    @click="exampleUrl = imgss.screenshot_url"
                  />
                </div>
                <p class="imgType">{{ origin.job_option_name }}</p>
              </div>
              <p
                class="lookImgs"
                @click="sample(origin.job_example_img, origin.job_option_name + '截图', origin.description)"
              >
                <span>查看示例</span>
              </p>
            </div>
          </div>
        </div>
        <div class="importantInfor">
          <ul>
            <li v-if="model" style="line-height: .6rem" @click="dateCatch()">
              <span class="rTime_red" v-if="rTime">{{ rTime }}秒</span>倒计时结束后，才可以开始做其他任务截图上传
              <br />倒计时期间请在宝贝详情页继续深度浏览对应宝贝。
            </li>
            <li class="ask_everyone" v-if="task.ask_everyone">
              <p>注意：请复制以下摸板，进行提问，并提交【问大家截图】否则无法通过审核</p>
              <div class="ask_everyone_btn copyes clearfix">
                <p>{{ task.ask_everyone }}</p>
                <button
                  v-clipboard="task.ask_everyone"
                  @success="handleSuccess"
                  @error="handleError(task.ask_everyone)"
                >复制</button>
              </div>
            </li>
            <li id="depth" v-if="task.question">
              <p class="text-red">找到商品后在商品详情页面从上至下缓缓浏览 并且在详情页中 根据以下提示找到问题答案：</p>
              <div class="answers">
                <div class="depth-answers-flex">
                  <h4>文字提示</h4>
                  <span class="text-red">{{ task.question.title }}</span>
                </div>
                <div class="depth-answers-flex1">
                  <h4>图片提示</h4>
                  <img
                    :src="task.question.img"
                    alt
                    width="100%"
                    @click="exampleUrl = task.question.img"
                  />
                </div>
              </div>
              <p style="margin-top: .5rem;">
                答案字数
                <span class="text-red">{{ task.question.answer_num }}个字</span>
              </p>
              <div id="depth-input">
                <input type="text" v-model="answer" :placeholder="holder_answer" />
                <button
                  class="sucs-button"
                  @click="answers(task.question.question_id, answer, task.work.work_id)"
                >验证</button>
                <div class="copyes fr">
                  <button
                    class="text-blue"
                    @click="exampleUrl = task.search_answer"
                    style="padding: 0.07rem 0.1rem;height: 1rem;color:#000;margin-top: 0.05rem"
                  >如何找答案</button>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <!--上传截图-->
        <div class="Inphotts clearfix">
          <div class="Joinglist PutPhoto clearfix">
            <div
              class="Imgphoto fl"
              v-for="(origin,index) in task.work.items.origin"
              v-if="origin.job_option_group == 2"
            >
              <div class="Imgphotos">
                <!--<div class="JoinImgs" @click="file($event, 2, origin.job_option_id)"-->
                <!--v-if="task.work.status.val == 1 || task.work.status.val == 5">-->
                <!--<img src="../../images/336.png" :id="'jobImg' + origin.job_option_id"-->
                <!--class="JoinImgsLogo" v-if="task.work.status.val != 5"/>-->
                <!--<img class="JoinImgsLogo" :id="'jobImg' + origin.job_option_id" v-else-->
                <!--:src="task.work.work_images[index].job_option_id ==  origin.job_option_id ? task.work.work_images[index].screenshot_url : ''"-->
                <!--alt="">-->
                <!--</div>-->
                <div
                  class="JoinImgs"
                  v-if="task.work.status.val == 1 || task.work.status.val == 5 || task.work.status.val == 6"
                >
                  <div v-if="task.work.status.val != 5 && task.work.status.val != 6">
                    <img
                      v-if="origin.uploadedImg"
                      :src="origin.uploadedImg"
                      :id="'jobImg' + origin.job_option_id"
                      class="JoinImgsLogo"
                    />
                    <img
                      v-else
                      src="../../images/336.png"
                      :id="'jobImg' + origin.job_option_id"
                      class="JoinImgsLogo"
                    />
                    <input
                      type="file"
                      @change="file"
                      accept="image/*"
                      name="image"
                      multiple="multiple"
                      :id="origin.job_option_id"
                      inx="2"
                    />
                  </div>
                  <div v-else>
                    <div
                      v-for="imgss in task.work.work_images"
                      v-if="imgss.job_option_id == origin.job_option_id"
                    >
                      <img
                        class="JoinImgsLogo"
                        :id="'jobImg' + origin.job_option_id"
                        :src="imgss.job_option_id == origin.job_option_id ? imgss.screenshot_url : ''"
                        alt
                      />
                      <input
                        type="file"
                        @change="file"
                        accept="image/*"
                        name="image"
                        multiple="multiple"
                        :id="origin.job_option_id"
                        inx="2"
                      />
                    </div>
                  </div>
                </div>
                <div class="JoinImgs" v-else>
                  <img
                    class="JoinImgsLogo"
                    v-for="imgss in task.work.work_images"
                    v-if="imgss.job_option_id == origin.job_option_id"
                    :src="imgss.job_option_id == origin.job_option_id ? imgss.screenshot_url : ''"
                    alt
                    @click="exampleUrl = imgss.screenshot_url"
                  />
                </div>
                <p class="imgType">{{ origin.job_option_name }}</p>
              </div>
              <p
                class="lookImgs"
                @click="sample(origin.job_example_img, origin.job_option_name + '截图', origin.description)"
              >
                <span>查看示例</span>
              </p>
            </div>
            <div
              id="Joinglist_model"
              v-if="task.work.status.val == 1 && model"
              @click="$toast('深度浏览倒计时中请继续浏览对应宝贝'),dateCatch()"
            ></div>
          </div>
        </div>
      </div>
      <div>
        <div class>
          <p v-if="remark" class="remark" style="background:#FFF8C4;">拒绝理由：{{ remark }}</p>
          <div v-if="task.work_apply">
            <p class="remark" style="background:#A5D1FE;">
              介入理由：{{
              task.work_apply.content }}
            </p>
          </div>
          <p v-if="work_apply" class="remark" style="background:#FFAEAD;">平台介入反馈：{{ work_apply }}</p>
        </div>

        <button
          v-if="task.work.status.val != 11"
          class="putwork"
          v-on:click="submit()"
          :disabled="model1"
          :class="{huise: model1}"
        >
          <i>提交任务</i>
          <p v-html="time"></p>
        </button>
        <button
          class="putwork"
          @click="reasonShow = true"
          v-if="task.work.status.val == 1 || task.work.status.val == 5"
        >
          <i>放弃任务</i>
        </button>
        <button
          class="putwork"
          @click="apply = true"
          v-if="again_number && task.work.status.val == 5"
        >
          <i>申请平台介入</i>
        </button>
      </div>
    </div>

    <!--提交任务-->

    <!--<div id="detailZZ" v-if="task.work.status.val != 1 && task.work.status.val != 5"></div>-->
    <!-- 轮播 -->
    <div v-if="swiperImg" class="detailBanImg">
      <div class="banner_head">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div
              class="swiper-slide"
              style="width:100%;"
              v-for="img in get(task,'job.images')"
              v-if="img.type != 4"
            >
              <a>
                <img :src="img.url" v-if="img.url.indexOf('http') != -1" />
                <img :src="qiniu_domain_url + img.url" v-else />
              </a>
            </div>
          </div>
          <div class="swiper-pagination"></div>
        </div>
      </div>
    </div>
    <!-- 示例截图 -->
    <div id="exampleImg" v-if="exampleUrl">
      <div class="ytTitle" v-if="sampleTitle">
        <h4>{{ sampleTitle }}</h4>
        <p>（此截图仅供参考）</p>
        <p v-if="description">{{ description }}</p>
      </div>
      <div class="exampleImg">
        <img :src="exampleUrl" alt />
      </div>
    </div>
    <!-- 注意事项 -->
    <!--<div class="specialNeeds" id="presenting" v-if="presenting && presentingTrue">-->
    <!--<h3>注意事项</h3>-->
    <!--<span class="specialNeeds_head">如未遵守以下几点并多次被投诉将封号</span>-->
    <!--<img src="../../images/presenting_close.png" alt="" class="fr" @click="presentingTrue = false">-->
    <!--<div class="tsxq">-->
    <!--<p>-->
    <!--1.确认使用<span>【{{ task.consumer.login }}】</span>任务号登录手机淘宝app，用错任务号将扣除佣金，并进行处罚<span>2金币</span>，多次被投诉将<span>封号</span>-->
    <!--</p>-->
    <!--<p>2.请务必核对店铺名称/客服<span>【{{ task.job.shop.hide_name }}】</span>，并对目标商品从上到下进行<span>至少2分钟浏览</span>-->
    <!--</p>-->
    <!--<p>3.加购物车至少保留<span>【7】</span>天，收藏商品，收藏店铺至少保留<span>【30】</span>天</p>-->
    <!--<p>4.【淘口令】任务的搜索截图请提交<span>淘口令弹窗截图</span></p>-->
    <!--</div>-->
    <!--</div>-->
    <!-- 放弃任务列表弹窗 -->
    <div id="reason" v-if="reasonShow">
      <ul>
        <li class="reasonTop">请选择原因</li>
        <li v-for="list in reasonList" @click="abortMission(list.text)">{{ list.text }}</li>
        <li class="reasonBottom" @click="reasonShow = false">取消</li>
      </ul>
    </div>
    <!-- 平台介入 -->
    <div id="apply" v-if="apply">
      <div class="applyBody">
        <h3>申请平台介入</h3>
        <!--<label for="">手机号</label><input type="text" placeholder="请填写手机号" >-->
        <!--<label for="">介入原因</label>-->
        <textarea v-model="applyText" placeholder="请填写需要介入的原因" contenteditable="true"></textarea>
        <div class="applyBodyBtn">
          <button @click="apply = false">取消</button>
          <button @click="applySuccess">提交</button>
        </div>
      </div>
    </div>
    <div class="fixed_color"></div>
    <div class="handle-error" @click.self="handleErrorText = ''" v-if="handleErrorText">
      <textarea :value="handleErrorText"></textarea>
    </div>
  </div>
</template>

<script>
import api from "../../utils/api";
// import * as qiniu from 'qiniu-js';
let OSS = require("ali-oss");
import { GenNonDuplicateID } from "../../utils/config";
import _ from "lodash";
import { MessageBox } from "mint-ui";

export default {
  name: "Detail",
  props: {
    accepts: {
      type: String,
      default: "image/jpeg,image/jpg,image/png,image/gif",
    },
    maxSize: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      task: {
        work: {
          keyword: "",
          items: "",
          status: "",
        },
        job: {
          goods: "",
          type: "",
          job_meta: "",
          shop: "",
        },
        consumer: "",
      },
      img: "", //商品主图 只检索第一张
      screenshots: [], // 上传图片后 信息存储
      qiniu_domain_url: "", //七牛主域名
      imginx: 0, // 上部分截图上传的 总长度 与 上传长度 匹配后计时
      imgleng: 0, // 上传长度
      rTime: false, // 上传图片倒计时
      time: "", //输出计时
      flag: false, //判断是否计时结束
      endTime: "", // 结束时间,
      workImgLeng: "",
      consumer_id: false,
      modalshow: false,
      swiperImg: false,
      goodLogoLength: "",
      presenting: false,
      presentingTrue: true,
      exampleUrl: "",
      reason: "",
      reasonList: [
        {
          text: "不想做了",
        },
        {
          text: "提交不了截图",
        },
        {
          text: "不知道怎么做任务",
        },
        {
          text: "关键词找不到商品",
        },
        {
          text: "任务信息异常",
        },
        {
          text: "其他",
        },
      ],
      reasonShow: false,
      model: true,
      model1: true,
      remark: false,
      again_number: false,
      apply: false,
      applyText: "",
      abortImg: [],
      work_apply: false,
      returnEntrance: false,
      parent_job: false,
      depth: false,
      answer: "",
      sendTime: false,
      holder_answer: false,
      credit_multiple: false, // 推荐积分
      finish_work_credit: false, // 积分
      cross: false, // 是否是跨平台
      copyData: "copy data",
      oss_config: [],
      sampleTitle: "",
      description: "",
      handleErrorText: "",
      staTime: "",
      browsing_time: false,
    };
  },
  created() {
    this.previewOSS();
    this.credit_multiple = parseInt(localStorage.getItem("credit_multiple"));
    this.finish_work_credit = parseInt(
      localStorage.getItem("finish_work_credit")
    );
    var sUserAgent = window.navigator.userAgent.toLowerCase();
    // if(this.is_weixn_qq().indexOf('QQ') != -1){
    //     alert('qq内置浏览器暂不支持上传图片 请点击右上角选择系统默认浏览器打开')
    // }

    // this.cross = this.$route.query.cross;
  },
  methods: {
    is_weixn_qq() {
      var ua = navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
        return "weixin";
      } else if (ua.match(/QQ/i) == "qq") {
        return "QQ";
      }
      return false;
    },
    get(object, path, defaultValue) {
      return _.get(...arguments);
    },
    // 调起接口获取任务详情数据
    async setData(type = 0) {
      var url = "/works/show";
      if (this.cross) {
        url = "/cross_platform/work";
      }
      let resp = await api.request(url, "get", {
        work_user_id: this.$route.params.id,
      });
      var _that = this;
      // 图片提交后 等待时间
      this.rTime = resp.data.data.job.job_limit.browsing_time * 60;
      this.browsing_time = resp.data.data.job.job_limit.browsing_time * 60;
      // 检索是否提交过任务
      if (
        localStorage.getItem("depth_work_id") &&
        resp.data.data.work.status.val == 1
      ) {
        if (
          localStorage.getItem("depth_work_id") == resp.data.data.work.work_id
        ) {
          this.answer = localStorage.getItem("depth_text");
          // this.depth = true;
        }
      }
      _that.task = resp.data.data;
      _that.consumer_id = resp.data.data.consumer_id;
      if (
        localStorage.getItem("work_user_id") == _that.$route.params.id &&
        resp.data.data.work.status.val == 1
      ) {
        _that.screenshots = JSON.parse(localStorage.getItem("imgupload"));
        for (var iteminx in _that.task.work.items.origin) {
          for (var img in _that.screenshots) {
            if (
              _that.task.work.items.origin[iteminx].job_option_id ==
              _that.screenshots[img].job_option_id
            ) {
              _that.task.work.items.origin[iteminx].uploadedImg =
                _that.screenshots[img].screenshot_url;
            }
          }
        }

        _that.imginx = parseInt(localStorage.getItem("imginx"));
        if (localStorage.getItem("sendTime")) {
          this.rTime = localStorage.getItem("sendTime");
          localStorage.removeItem("sendTime");
        }
      } else {
        localStorage.removeItem("sendTime");
        localStorage.removeItem("imginx");
      }

      // 加载问题答案
      if (resp.data.data.work.status.val != 1) {
        if (_that.task.question == null) {
          _that.task.question = "";
        }
        _that.answer = _that.task.question.answer;
      } else {
        if (_that.task.question) {
          if (_that.task.question.answer.length >= 3) {
            _that.holder_answer = _that.task.question.answer;
          }
        }
      }
      // 如果为拒绝任务，则没有图片提交限制
      if (_that.task.work.status.val == 5 || _that.task.work.status.val == 6) {
        this.rTime = 0;
        this.depth = true;
      }
      let returnzj = [];
      returnzj[1] = "足迹进入";
      returnzj[2] = "收藏进入";
      returnzj[3] = "加购进入";
      returnzj[4] = "猜你喜欢";
      // 回访任务入口
      if (_that.task.job.return_entrance) {
        console.log(this.returnEntrance);
        _that.returnEntrance =
          returnzj[_that.task.job.return_entrance.job_meta_value];
      }
      if (_that.task.job.parent_job) {
        _that.parent_job = _that.task.job.parent_job.p_type.text;
      }
      // 平台介入
      if (_that.task.again_number) {
        _that.again_number = _that.task.again_number.meta_value;
      } else {
        _that.again_number = false;
      }
      if (_that.task.work_apply) {
        _that.work_apply = _that.task.work_apply.remark;
      }

      _that.qiniu_domain_url = "https://wyrq-2.oss-cn-shanghai.aliyuncs.com/";
      if (_that.task.job.images[0].url.indexOf("http") != -1) {
        _that.img = _that.task.job.images[0].url;
      } else {
        _that.img = _that.qiniu_domain_url + _that.task.job.images[0].url;
      }
      // if (_that.task.work.status.val != 1 && _that.task.work.status.val != 5) {
      //     return false;
      // }

      // meta数据 （拒绝理由等）

      for (let i in _that.task.work.work_meta) {
        // if(!this.cross){
        if (_that.task.work.work_meta[i].meta_key == "expire_time") {
          // _that.endTime = _that.getLocalTime(_that.task.work.work_meta[i].meta_value)
          _that.endTime = _that.task.work.work_meta[i].meta_value;
        }
        if (_that.task.work.work_meta[i].meta_key == "remark") {
          _that.remark = _that.task.work.work_meta[i].meta_value;
        }
      }
      // if (this.task.work.status.val == 1 || this.task.work.status.val == 5) {
      //     _that.endTime = _that.getLocalTime(this.task.expire_time);
      // }
      for (let i in _that.task.work.items.origin) {
        if (_that.task.work.items.origin[i].job_option_group == 1) {
          _that.imgleng++;
        }
        _that.workImgLeng++;
      }
      this.$nextTick(() => {
        let time = setInterval(() => {
          if (
            this.task.work.status.val != 1 &&
            (this.task.work.status.val != 5 || this.task.work.status.val != 6)
          ) {
            this.time = this.task.work.status.text;
            // document.getElementBy('status_text').innerHTML = this.task.work.status.text
            clearInterval(time);
            return false;
          }
          if (this.flag == true) {
            clearInterval(time);
          }
          this.timeDown();
        }, 500);
      });
    },
    // 上传图片到阿里云
    async file(event) {
      let job_option_id = event.target.getAttribute("id");
      var job_inx = event.target.getAttribute("inx");
      job_inx == 1 ? (this.imginx += 1) : (this.imginx = this.imginx);

      let file = event.target.files[0];
      let _that = this;

      let client = new OSS(this.oss_config);
      try {
        let result = await client.put(GenNonDuplicateID(32), file);
        if (
          _that.task.work.status.val == 5 ||
          _that.task.work.status.val == 6
        ) {
          document
            .getElementById("jobImg" + job_option_id)
            .setAttribute("src", result.url);
          _that.screenshots = _that.task.work.work_images;
          for (let inx in _that.screenshots) {
            _that.screenshots[inx].create_time =
              new Date(_that.screenshots[inx].create_time).getTime() / 1000; // 所有数组内日期转时间戳
            if (_that.screenshots[inx].job_option_id == job_option_id) {
              _that.screenshots[inx].screenshot_url = result.url; // 覆盖图片
              _that.screenshots[inx].create_time =
                Date.parse(new Date()) / 1000; //覆盖时间
            }
          }
          _that.model = false;
          _that.model1 = false;
          _that.rTime = 0;
          return false;
        }
        document
          .getElementById("jobImg" + job_option_id)
          .setAttribute("src", result.url);
        for (let i in _that.screenshots) {
          if (_that.screenshots[i].job_option_id == job_option_id) {
            _that.screenshots.splice(i, 1);
          }
        }
        _that.screenshots.push({
          screenshot_url: result.url,
          job_option_id: job_option_id,
          create_time: Date.parse(new Date()) / 1000,
        });
        //记录图片上传
        localStorage.setItem("imgupload", JSON.stringify(_that.screenshots));
        localStorage.setItem("work_user_id", _that.$route.params.id);
        localStorage.setItem("imginx", _that.imginx);
        _that.imginx = parseInt(localStorage.getItem("imginx"));
        if (_that.imginx == _that.imgleng) {
          _that.send();
          _that.staTime = Date.parse(new Date()) / 1000;
        }
        event.target.setAttribute("inx", 2);
      } catch (e) {
        console.log(e);
      }
    },
    async previewOSS(name, file) {
      let resp = await api.request("/oss_config", "get", {});
      let data = resp.data.data;
      let par = {
        region: "oss-cn-shanghai",
        accessKeyId: data.accessKeyId,
        accessKeySecret: data.accessKeySecret,
        bucket: data.bucket,
      };
      this.oss_config = par;
    },
    // 上传图片倒计时
    send() {
      let that = this;
      let rTime = that.rTime;
      let interval = window.setInterval(() => {
        if (--that.rTime <= 0) {
          that.rTime = 0;
          this.model = false;
          this.model1 = false;
          window.clearInterval(interval);
        }
        localStorage.setItem("sendTime", that.rTime);
      }, 1000);
    },
    dateCatch() {
      if (this.staTime) {
        let staTime = this.staTime;
        let time = Date.parse(new Date()) / 1000;
        let ensTime = time - staTime;

        if (this.rTime != 0) {
          if (ensTime) {
            this.rTime = this.browsing_time - ensTime;
          }
        }
      }
    },
    // 任务结束时间倒计时
    timeDown() {
      // const endTime = new Date(this.endTime)
      // const nowTime = new Date();
      let leftTime = parseInt(this.endTime - Date.parse(new Date()) / 1000);
      let d = parseInt(leftTime / (24 * 60 * 60));
      let h = this.formate(parseInt((leftTime / (60 * 60)) % 24));
      let m = this.formate(parseInt((leftTime / 60) % 60));
      let s = this.formate(parseInt(leftTime % 60));

      let ds = "";
      let hs = "";
      let ms = "";
      if (leftTime <= 0) {
        this.flag = true;
        this.time = "任务已结束";
        this.model = true;
        this.model1 = true;
        return false;
      }

      // d != 0 ? time += d + '天' : '';
      // h != 0 ? time += h + '小时' : '';
      // m != 0 ? time += m + '分' : '';
      // this.time = '任务过期时间：' + time + s + '秒'

      if (d != 0) {
        d = "<span>" + d + "</span>";
        ds = ":";
      } else {
        d = "";
      }
      if (h != 0) {
        h = "<span>" + h + "</span>";
        hs = ":";
      } else {
        h = "";
      }
      if (m != 0) {
        m = "<span>" + m + "</span>";
        ms = ":";
      } else {
        m = "";
      }
      this.time =
        "<em>任务过期时间：</em>" +
        d +
        ds +
        h +
        hs +
        m +
        ms +
        "<span>" +
        s +
        "</span>";
    },
    formate(time) {
      if (time >= 10) {
        return time;
      } else {
        return `0${time}`;
      }
    },
    // 时间戳转换
    getLocalTime(nS) {
      let str = new Date(parseInt(nS) * 1000).toLocaleString("chinese", {
        hour12: false,
      });
      return str.split("/").join("-");
    },
    // 提交任务
    async submit() {
      this.model1 = !this.model1;
      if (!this.depth && this.task.question) {
        this.$toast("请先点击验证深度浏览答案");
        return false;
      }
      try {
        // if (this.task.work.status.val != 5 && this.task.work.status.val != 6) {
        //     if (this.workImgLeng != this.screenshots.length) {
        //         this.$toast('图片未上传完整！');
        //         return false;
        //     }
        // }

        let param = {
          work_user_id: this.$route.params.id,
          consumer_id: this.consumer_id,
          work_images: JSON.stringify(this.screenshots),
        };
        var url = "/works/store";
        if (this.cross) {
          url = "/cross_platform/store";
        }
        let resp = await api.request(url, "post", param);
        // if (resp.code == 201) {
        // await api.request('/workAuditNum', 'get', {}).then(function (res) {
        //     localStorage.setItem("tbworkAuditNumber",res.data.data.taobao.num);
        //     localStorage.setItem("jdworkAuditNumber",res.data.data.jingdong.num);
        //     localStorage.setItem("pddworkAuditNumber",res.data.data.pingduoduo.num);
        // })
        this.$toast("提交成功！");
        this.$router.push({ path: "/" });
        // }
      } catch (e) {
        this.model1 = !this.model1;
      }
    },
    swiperIMG() {
      this.swiperImg = true;
      setTimeout(function () {
        var mySwiper = new Swiper(".swiper-container", {
          loop: true,
          autoplayDisableOnInteraction: false,
          pagination: ".swiper-pagination",
        });
        if (mySwiper.slides.length <= 3) {
          mySwiper.lockSwipes();
        }
      }, 100);
    },
    async abortMission(reason) {
      this.reasonShow = false;
      let param = {
        work_id: this.task.work_id,
        reason: reason,
        consumer_id: this.task.consumer_id,
      };
      var url = "/abortMission";
      if (this.cross) {
        url = "/cross_platform/abortMission";
      }
      let res = await api.request(url, "post", param);
      if (res.status == 204) {
        this.$toast("放弃成功！");
        this.$router.push({ path: "/" });
      }
    },
    async applySuccess() {
      this.apply = false;
      if (this.applyText.length <= 3) {
        this.$toast("请正确填写介入理由！字数不得少于三个字");
        return false;
      }
      let param = {
        work_id: this.task.work_id,
        job_id: this.task.job_id,
        consumer_id: this.task.consumer.consumer_id,
        content: this.applyText,
      };

      await api.request("/works/apply", "post", param).then(() => {
        this.$toast("申请介入成功！");
        this.$router.push({ path: "/" });
      });
    },

    titleMessage(title) {
      MessageBox(title);
    },
    async answers(question_id, answer, work_id) {
      let param = {
        question_id: question_id,
        answer: answer,
        work_id: work_id,
      };
      let resp = await api.request("/answers", "post", param);

      if (resp.status == 200) {
        this.$toast(resp.data.message);
        this.depth = true;

        // 验证成功后 存储
        localStorage.setItem("depth_text", answer);
        localStorage.setItem("depth_work_id", work_id);
      } else {
        // 验证失败删除 存储
        localStorage.removeItem("depth_text");
        localStorage.removeItem("depth_work_id");
        this.depth = false;
      }
    },
    handleSuccess(e) {
      this.$toast("复制成功");
    },
    handleError(e) {
      this.$toast("复制失败，请手动复制");
      this.handleErrorText = e;
    },
    sample(url, title, descriptionText) {
      this.exampleUrl = this.qiniu_domain_url + url;
      this.sampleTitle = title;
      this.description = descriptionText;
    },
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
    window.uploadImg = this.uploadImg;
    this.setData();

    window.onbeforeunload = function (event) {
      return "您可能有数据没有保存";
    };
  },
  computed: {
    /**
     * 上部分已上传数量
     *
     * @returns {*}
     */
    topUploadedCount() {
      return _.filter(this.task.work.items.origin, (o) => {
        return o.job_option_group == 1 && o.uploadedImg;
      }).length;
    },
    /**
     * 上部分总数
     *
     * @returns {*}
     */
    topCount() {
      return _.filter(
        this.task.work.items.origin,
        (o) => o.job_option_group == 1
      ).length;
    },
    /**
     * 下部分已上传数量
     *
     * @returns {*}
     */
    downUploadedCount() {
      return _.filter(this.task.work.items.origin, (o) => {
        return o.job_option_group == 2 && o.uploadedImg;
      }).length;
    },
    /**
     * 下部分总数
     *
     * @returns {*}
     */
    downCount() {
      return _.filter(
        this.task.work.items.origin,
        (o) => o.job_option_group == 2
      ).length;
    },
  },
  watch: {
    topUploadedCount(newValue) {
      if (this.task.work.status.val != 5 && this.task.work.status.val != 6) {
        if (newValue >= this.topCount) {
          this.send();
        }
      }
    },
    exampleUrl(url) {
      if (url) {
        document.body.setAttribute("style", "overflow:hidden;");
      } else {
        document.body.setAttribute("style", "overflow:visible;");
      }
    },
  },
};
</script>
<style>
.mint-msgbox-message {
  word-break: break-all;
}

.detailBanImg {
  position: fixed;
  right: 0.5rem;
  left: 0.5rem;
  top: 1rem;
  z-index: 9999;
  border-radius: 0.3rem;
  overflow: hidden;
}

.detailBanImg .banner_head img {
  height: auto;
  max-height: 9.5rem;
}

#reason {
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999999;
}

#reason ul {
  width: 70%;
  margin: 0 auto;
  background: #fff;
  text-align: center;
  border-radius: 0.3rem;
  overflow: hidden;
  margin-top: 20%;
}

#reason ul li {
  color: #ff9815;
  border-top: 1px solid #eee;
  padding: 0.3rem 0;
  font-size: 0.4rem;
}

#reason .reasonTop {
  padding: 0.6rem 0;
  border: 0;
  color: #000;
}

#reason .reasonBottom {
  color: #f84656;
}

.endClock {
  position: relative;
}

.huise {
  background: #999;
}

.W_550 {
  padding: 0 0.3rem;
}

.remark {
  font-size: 0.3rem;
  color: #333;
  padding: 0.3rem 0.5rem;
  border-radius: 0.3rem;
  margin-top: 0.2rem;
}

#apply {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  margin: auto;
  z-index: 999;
  text-align: center;
  color: #999;
}

#apply .applyBody {
  width: 90%;
  height: 12rem;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  margin: auto;
  border-radius: 0.5rem;
  box-shadow: 0 0 0.3rem #eee;
}

#apply label {
  display: block;
  margin: 0.2rem 0;
}

#apply h3 {
  color: #999;
  font-size: 0.6rem;
  margin: 0.5rem 0;
}

#apply input,
#apply textarea {
  border-radius: 0.2rem;
  border: 1px solid #999;
  width: 80%;
  display: block;
  margin: 0 auto;
  box-sizing: border-box;
  font-size: 0.4rem;
  color: #999;
}

#apply input {
  padding: 0.2rem 0.5rem;
}

#apply textarea {
  padding: 0.2rem 0.5rem;
  height: 5rem;
  color: #000;
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  outline: 0;
  -webkit-user-select: auto;
}

#apply .applyBodyBtn {
  margin-top: 1.5rem;
}

#apply .applyBodyBtn button {
  border: 0;
  width: 3rem;
  height: 1rem;
  background: #999;
  border-radius: 0.2rem;
  margin: 0.3rem 0.5rem;
  font-size: 0.4rem;
  outline: none;
  color: #fff;
}

#depth {
  border: 0;
}

.answers {
  display: flex;
}

.answers > div {
  flex: 1;
}

.reward {
  margin: 0;
  font-size: 0.3rem;
}

.fixed_color {
  background: #f2f2f2;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.handle-error {
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
}
.handle-error textarea {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  height: 50%;
  width: 70%;
  border-radius: 0.2rem;
  padding: 0.3rem 0.5rem;
  box-sizing: border-box;
  font-size: 0.45rem;
  outline: none;
  letter-spacing: 0.02rem;
  background: #eee;
}
</style>
